<template>
    <div class="main config-brand-list">
        <section>
            <div v-if="rightsButtons['add']" class="btn-block">
                <el-button type="success" size="small" icon="el-icon-circle-plus" @click="addBrand" plain>新建品牌</el-button>
            </div>
            <el-form ref="searchForm" class="search-block" :model="listQuery" label-position="left" label-width="82px">
                <input type="text" style="display: none"/>
                <el-row :gutter="50">
                    <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="6">
                      <el-form-item label="品牌名称：" prop="name">
                        <el-input @keyup.enter.native="search" v-model="listQuery.brand_name" placeholder="品牌名称" maxlength="50" clearable></el-input>
                      </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="" class="btn-item">
                    <el-button type="primary" size="mini" icon="el-icon-search" plain @click="search">搜索</el-button>
                    <span class="btn-reset" @click="resetForm('searchForm')">清空搜索条件</span>
                </el-form-item>
            </el-form>
            <el-table :data="list" v-loading="listLoading" header-row-class-name="table-header" element-loading-text="给我一点时间" border highlight-current-row>
                <el-table-column align="center" label="品牌ID" prop="id"></el-table-column>
                <el-table-column align="center" label="品牌名称" prop="name"></el-table-column>
                <el-table-column align="center" label="品牌LOGO" prop="picSet">
                    <template slot-scope="scope" v-if="scope.row.logo">
                        <img :src="scope.row.logo" style="max-width: 100%; max-height: 100px">
                    </template>
                </el-table-column>
                <el-table-column align="center" label="修改时间">
                    <template slot-scope="scope">
                        <span>{{formatDate(scope.row.createdAt, 'YYYY-MM-DD HH:mm:ss')}}</span>
                    </template>
                </el-table-column>
                <el-table-column align="center" label="操作" width="220" >
                    <template slot-scope="scope">
                        <el-button v-if="rightsButtons['edit']" type="primary" size="mini" @click="editBrand(scope.row)" >编辑</el-button>
                        <el-button v-if="rightsButtons['auth']" type="primary" size="mini" @click="authList(scope.row.id,scope.row.name)">授权</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page.sync="listQuery.page"
                    :page-sizes="[10, 20, 50, 100]"
                    :page-size="listQuery.page_size"
                    background
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="listTotal">
            </el-pagination>
        </section>

        <el-dialog :title="editItem.id ? '编辑品牌' : '新建品牌'" :visible.sync="showEditPop" :before-close="cancel">
            <el-form :model="editItem" :rules="editRule" size="medium" ref="editItem" label-width="120px">
                <el-form-item label="品牌名称:" prop="brandName">
                    <el-input v-model="editItem.brandName"></el-input>
                </el-form-item>
                <el-form-item label="品牌LOGO:" prop="logoUrl">
                    <el-upload
                            class="avatar-uploader"
                            accept="gif.,.jpg,.png"
                            :action="upladUrl"
                            name="file"
                            :show-file-list="false"
                            :on-success="uploadLogoSuccess"
                            :before-upload="beforeUpload">
                        <img v-if="editItem.logoUrl" :src="editItem.logoUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="品牌描述：" prop="description">
                  <el-input type="textarea" :autosize="{ minRows: 5, maxRows: 5 }" v-model="editItem.description"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="save" :disabled="btnDisabled">保存</el-button>
                <el-button @click="cancel">取消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
  import { getBrandConfigList, addBrand, editBrand } from '@/api/merchantsys/config'
    export default {
        name: 'brandConfigList',
        data() {
            return {
                list: [],
                listQuery: {
                    brand_name: '',
                    page: 1,
                    page_size: 10
                },
                pList: [],
                listTotal: 0,
                listLoading: false,
                editItem:{
                    id:'',
                    brandName:'',
                    logoUrl:'',
                    description:''
                },
                editRule: {
                    brandName: [
                        {required: true, message: '不能为空', trigger: 'blur'},
                        {max: 50, message: '不能超过50字符', trigger: 'blur'},
                    ],
                    logoUrl:[
                        {required: true, message:'不能为空', trigger: 'blur'}
                    ],
                    description:[
                        {required: true, message: '不能为空', trigger: 'blur'},
                        {max: 200, message: '不能超过200字符', trigger: 'blur'},
                    ]
                },
                showEditPop: false,
                btnDisabled: false,
            }
        },
        created() {
            this.getList()
        },
        methods: {
            authList(brandId, brandName){
                this.$router.push({path:'/config/brand/auth/list/'+brandId, query:{brandName:brandName}})
            },
            uploadLogoSuccess(res, file){
                this.editItem.logoUrl=this.replaceImgUrl(res.filePath)
            },
            addBrand(){
                this.showEditPop = true;
                this.btnDisabled = false;
            },
            editBrand(obj){
                this.addBrand()
                this.editItem.id=obj.id
                this.editItem.brandName = obj.name
                this.editItem.logoUrl = obj.logo
                this.editItem.description = obj.description
            },
            clearData(){
                this.editItem={}
            },
            cancel(){
                this.clearData()
                this.showEditPop = false
            },
            // 保存
            save() {
                this.$refs.editItem.validate(valid => {
                    if (!valid) {
                        return false;
                    }
                    console.log(this.editItem)
                    this.btnDisabled=true
                    if(this.editItem.id){
                        editBrand({
                            id: this.editItem.id,
                            brand_name: this.editItem.brandName,
                            logo_url: this.editItem.logoUrl,
                            description: this.editItem.description
                        }).then(res=>{
                            this.$message.success('保存成功')
                            this.showEditPop = false;
                            this.getList()
                        }).catch(err=>{
                            this.btnDisabled=false
                        })
                    }else{
                        addBrand({
                            brand_name: this.editItem.brandName,
                            logo_url: this.editItem.logoUrl,
                            description: this.editItem.description
                        }).then(res=>{
                            this.$message.success('保存成功')
                            this.showEditPop = false;
                            this.getList()
                        }).catch(err=>{
                            this.btnDisabled=false
                        })
                    }
                });
            },
            getList(){
                this.listLoading = true;
                getBrandConfigList(this.listQuery).then(res => {
                this.list = res.data.data;
                this.listTotal = res.data.total;
                this.listLoading = false;
                }).catch(err => {
                    this.list = [];
                    this.listTotal = 0;
                    this.listLoading = false;
                })
            },
            // 清空搜索条件
            resetForm (formName) {
                this.$nextTick(() => {
                    this.$refs[formName].resetFields()
                })
            },
                // 搜索
                search() {
                    this.listQuery.page = 1;
                    this.getList();
                },
                //切换每页条数
                handleSizeChange (value) {
                    this.listQuery.page_size = value;
                    this.getList()
                },
                // 切换分页
                handleCurrentChange(page) {
                    this.listQuery.page = page;
                    this.getList();
                },
        }
    }
</script>

<style lang="scss">
    .ad-manage-list>section{
        padding: 24px;
        background: #fff;
    }
</style>
